import React, { Key, useEffect, useState } from 'react'
import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
import { Button, Card, Form, Input, message, Table ,Tooltip} from 'antd';
import style from './index.module.css'
import { getHosSetPageListRequest,deleteHospitalRequest,batchDeleteHospitalRequest } from '@api/hospital/hospitalSet'
import type {HosSetRecordsType,HosSetRecordsItemType} from '@api/hospital/model/hospitalSetType'
import { HosSetParamsType } from './hospitalSetType';
import { useNavigate } from 'react-router-dom';
export default function HospitalSet() {
    //编程式路由
    const navigate = useNavigate()
    //当前页
    const [page, setPage] = useState(1)
    //每页条数
    const [limit, setLimit] = useState(3)
    //总条数
    const [total,setTotal] = useState(0)
    //分页列表数据
    const [hosSetlist,setHosSetList] = useState<HosSetRecordsType>([])
    //加载
    const [isLoading,setIsLoading] = useState(false)
    //查询的name和value
    const [finishValue,setFinishValue] = useState<HosSetParamsType>({})
    //定义状态重新渲染
    const [reRender,setReRender] = useState(true)
    //保存批量删除列表
    const [ids,setIds] = useState<Key[]>([])
    //初始化请求分页数据
    useEffect(() => {
        setIsLoading(true)
        const getHosSet = async () => {
            const re = await getHosSetPageListRequest({
                page,
                limit,
                ...finishValue
            })
            setHosSetList(re.records)
            setTotal(re.total)
            setIsLoading(false)
        }
        getHosSet()
    }, [page,limit,finishValue,reRender])
    //查询触发的回调
    const finishHandle = (fieldValue:HosSetParamsType) => {
        console.log(fieldValue);
        
        setFinishValue(fieldValue)
    }
    //清空重新查询
    const clearHandle = () => {
        setFinishValue({})
    }
    //删除医院
    const deleteHosSetHandle = (id:number) => {
        return async () => {
            await deleteHospitalRequest(id)
            setReRender(!reRender)
            message.success('删除医院成功')
        }
    }
    //批量删除
    const batchDeleteHandle = async () => {
        await batchDeleteHospitalRequest(ids)
        setIds([])
        setReRender(!reRender)
        message.success('批量删除医院成功')
    }
    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            width:80,
            render(_: any, __: any, index: number) {
                return index + 1
            }
        },
        {
            title: '医院名称',
            dataIndex: 'hosname',
        },
        {
            title: '医院编号',
            dataIndex: 'hoscode',
        },
        {
            title: 'api基础路径',
            dataIndex: 'apiUrl',
        },
        {
            title: '签名',
            dataIndex: 'signKey',
        },
        {
            title: '联系人姓名',
            dataIndex: 'contactsName',
        },
        {
            title: '联系人手机',
            dataIndex: 'contactsPhone',
        },
        {
            title: '操作',
            dataIndex: 'action',
            fixed:"right" as 'right',
            width:120,
            render(_:any,data:HosSetRecordsItemType) {
                const {id} = data
                return (
                    <div>
                        <Tooltip title={'修改医院'}>
                            <Button type="primary" icon={<EditOutlined />}  onClick={() =>{navigate(`/syt/hospital/updatehospital/${id}`)}}></Button>
                        </Tooltip>
                        <Tooltip title={'删除医院'}>
                            <Button type='primary' danger icon={<DeleteOutlined />} className={style.mt} onClick={deleteHosSetHandle(id)}></Button>
                        </Tooltip>                   
                    </div>
                )
            }
        },
    ];
    return (
        <div className={style.outer}>
            <Card>
                <Form
                    name="basic"
                    wrapperCol={{ span: 30 }}
                    layout='inline'
                    onFinish={finishHandle}
                >
                    <Form.Item
                        name="hosname"
                    >
                        <Input placeholder='医院名称' />
                    </Form.Item>

                    <Form.Item
                        name="hoscode"
                    >
                        <Input placeholder='医院编号' />
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 2, span: 16 }}>
                        <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
                            查询
                        </Button>
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 2, span: 16 }}>
                        <Button type="default" htmlType="reset" onClick={clearHandle}>
                            清空
                        </Button>
                    </Form.Item>

                </Form>
                <Button type='primary' htmlType='submit' className={style.mr} onClick={() => {navigate('/syt/hospital/addhospital')}}>添加</Button>
                <Button type='primary' danger disabled={ids.length === 0 ? true: false} className={style.mt} onClick={batchDeleteHandle}>批量删除</Button>
                <Table
                    columns={columns}
                    dataSource={hosSetlist}
                    className={style.mr}
                    bordered
                    rowKey='id'
                    scroll={{x:1400}}
                    loading={isLoading}
                    rowSelection={{
                        onChange(ids:Key[]){
                            setIds(ids)
                        }
                    }}
                    pagination={{
                        current:page,
                        pageSize:limit,
                        total:total,
                        pageSizeOptions:[2,3,4,5],
                        showSizeChanger:true,
                        showTotal(total){
                            return `总共有${total}条数据`
                        },
                        onChange(page,pageSize){
                            setPage(page)
                            setLimit(pageSize)
                        }
                    }}
                    
                />
            </Card>
        </div>
    )
}
